<script setup name="Userquestion">
import Info from './info.vue'
import {detailApi, pageApi} from "@/api/practice/userquestion";
const {proxy} = getCurrentInstance();
// 表单状态
const filterState = ref(true)
const dataList = ref([]);
// 表单数据
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
const total = ref(0);
const detail_total = ref(0)
onMounted(()=>{
  loadData()
})

function loadData(){
  pageApi(queryParams).then(response =>{
    dataList.value = response.rows;
    total.value = response.total;
  })
}
// 编辑
const infoRef = ref()
const onUserInfo = (row) => {
  infoRef.value.state = true
  if (row) {
    Object.assign(infoRef.value.formData,row)
    infoRef.value.formData.questions = row.content.split(',')
    infoRef.value.formData.qid = row.id
  }
}

const setDetail=ref(false)
const detail_query_params=ref({
  pageNum: 1,
  pageSize: 10,
  qid:0,
  dept:''
})
const showDetail=(row)=>{
  setDetail.value=true
  detail_query_params.value.qid=row.id
  loadDetail()
}
const details=ref([])

function loadDetail(){
  detailApi(detail_query_params.value).then(response =>{
    details.value= response.rows;
    detail_total.value = response.total;
  })
}
loadData()
</script>
<template>
  <!-- 逻辑层 -->
  <Info ref="infoRef" @flush="loadData"/>
  <div class="app-container">


    <!-- 逻辑层 -->

    <!-- 筛选 -->
    <template  v-if="filterState">
      <el-form :inline="true" :model="queryParams">
        <el-form-item label="问卷标题">
          <el-input placeholder="请输入问题标题" v-model="queryParams.title" />
        </el-form-item>
        <el-form-item label="问题日期">
          <el-date-picker
            v-model="queryParams.created_at_temp"
            type="daterange"
            range-separator="到"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary"> <span class="iconfont icon-sousuo" @click="loadData"></span>搜索 </el-button>
          <el-button type="default"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </template>
    <!-- 筛选 -->
    <!-- 内容 -->
    <!-- 按钮组 -->
    <!-- 按钮组 -->
    <!-- 表格 -->
    <el-table :data="dataList" :border="true">
      <el-table-column type="selection" align="center" fixed="left"></el-table-column>
      <el-table-column label="序号" prop="id" align="center" width="60"></el-table-column>
      <el-table-column label="问卷标题" prop="title" align="center" width="200"></el-table-column>
      <el-table-column label="开始日期" prop="sdate" align="center" width="150"></el-table-column>
      <el-table-column label="结束日期" prop="edate" align="center" width="150"></el-table-column>
      <el-table-column label="问卷内容" prop="content" align="center"></el-table-column>
      <el-table-column label="完成人数" prop="nums" align="center" width="100"></el-table-column>
      <el-table-column label="操作" align="center" width="120" fixed="right">
        <template #default="scoped">
          <el-button type="primary" link size="small" @click="showDetail(scoped.row)">
            <span class="iconfont icon-bianji"></span>详情
          </el-button>
          <el-button type="primary" :disabled="!scoped.row.flag" link size="small" @click="onUserInfo(scoped.row)">
            <span class="iconfont icon-bianji"></span>做问卷
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 -->
<!--    &lt;!&ndash; 分页 &ndash;&gt;-->
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="loadData"
    />
    <!-- 分页 -->
    <!-- 内容 -->
    <el-dialog
        v-model="setDetail"
        title="调查问卷已做记录"
        width="800"
        :before-close="() => (setDetail = false)"
    >
<!--      条件-->
      <div>
        <el-form :inline="true" :model="detail_query_params">
          <el-form-item label="部门名称">
            <el-input placeholder="请输入部门名称" v-model="detail_query_params.dept" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loadDetail"> <span class="iconfont icon-sousuo"></span>搜索 </el-button>
          </el-form-item>
        </el-form>
      </div>
<!--      列表-->
      <!-- 表格 -->
      <el-table :data="details">
        <el-table-column label="序号" prop="id" align="center" width="60"></el-table-column>
        <el-table-column label="部门名称" prop="dept" align="center" width="100"></el-table-column>
        <el-table-column label="姓名" prop="name" align="center" width="80"></el-table-column>
        <el-table-column label="问卷" prop="qid" align="center" width="60"></el-table-column>
        <el-table-column label="回答内容" prop="answer" align="center"></el-table-column>
        <el-table-column label="完成时间" prop="ctime" align="center"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
          v-show="detail_total > 0"
          :total="detail_total"
          v-model:page="detail_query_params.pageNum"
          v-model:limit="detail_query_params.pageSize"
          @pagination="loadDetail"
      />
    </el-dialog>
  </div>
</template>
